<template>
	<view class="relative full-screen" @click="clickOutside">
		<view class="absolute" style="z-index:0;left:0;right:0;top:0;bottom:0;background-image:radial-gradient(circle at left top, #D8230A26 50%, transparent 50%);background-size:396px 396px;background-repeat:no-repeat;filter:blur(50px);"></view>
		<uni-nav-bar ref="navBar" fixed statusBar :border="false" backgroundColor="transparent" @clickLeft="goBack">
			<template v-slot:left>
				<image class="size-32" src="@/static/svg/icon-back.svg" />
			</template>
			<view class="flex center w-full fs-16 text-black">订单管理</view>
		</uni-nav-bar>
		<z-paging ref="paging" :fixed="false" loading-more-no-more-text="到底啦～" :paging-style="{height: `calc(100vh - ${navBarHeight || 0}px)`}" v-model="dataList" @query="queryList">
			<template #top>
				<view class="flex justify-between item-center m-16">
					<view>
						<view class="fs-16 font-semibold">{{activeOrderStatistics && activeOrderStatistics.validOrderNum}}</view>
						<view class="flex item-center fs-12">有效订单
							<tooltip :show="showTooltipType===1" placement="bottom" title="有效订单" content="全部订单-已取消订单">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(1)"></image>
							</tooltip>
						</view>
					</view>
					<view class="h-9 w-1" style="background:#333;"></view>
					<view>
						<view class="fs-16 font-semibold">{{activeOrderStatistics && activeOrderStatistics.totalOrderAmt}}</view>
						<view class="flex item-center fs-12">订单总金额
							<tooltip :show="showTooltipType===2" placement="bottom" title="订单总金额" content="有效订单金额总和">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(2)"></image>
							</tooltip>
						</view>
					</view>
					<view class="h-9 w-1" style="background:#333;"></view>
					<view>
						<view class="fs-16 font-semibold">{{activeOrderStatistics && activeOrderStatistics.estimateSubsidyAmt}}</view>
						<view class="flex item-center fs-12">预估补贴
							<tooltip :show="showTooltipType===3" placement="bottom-right" title="预估补贴" content="有效订单营销补贴+佣金补贴+红包总和">
								<image class="size-20 p-4 inline-flex item-center" src="@/pagesB/static/activity/icon-question.svg" @click.stop="showTooltip(3)"></image>
							</tooltip>
						</view>
					</view>
				</view>
				<scroll-view scroll-x class="order-status-tabs px-16 pb-8" scroll-with-animation :scroll-left="scrollLeft">
					<view v-for="(tab,i) in orderStatusTabs" :key="i" class="tab-item" :class="currentOrderStatusTab===tab.code ? 'active text-color-regular fs-16 text-bold':'text-color-hint fs-15'" @click="onOrderStatusTabClick(tab, i)">
						<text>{{tab.name}}</text>
					</view>
				</scroll-view>
			</template>
			<template #empty>
				<view class="flex-col item-center">
					<image style="height:140px;" src="@/static/svg/order/empty-order.svg"></image>
					<text class="mt-4 fs-12">暂无相关订单～</text>
				</view>
			</template>
			<view v-for="(item, i) in dataList" :key="i" class="radius-12 overflow-hidden mx-16 mb-12">
				<OrderListItem
					:data="item"
					:viewOrderType="4"
				/>
			</view>
			<template #bottom>
				<view v-if="dataList && dataList.length" :style="`padding-bottom: ${safeAreaBottom}px;`">
					<button class="radius-12 bg-secondary-success h-46 mx-16 mb-16 text-white fs-16" @click="showExport">订单导出</button>
				</view>
				<export-popup
					ref="exportPopupRef"
					:id="activeId"
					/>
			</template>
		</z-paging>
	</view>
</template>

/**
 * 具体某一活动的订单管理
 */
<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { onMounted, ref, unref, computed } from 'vue'
	import { getOrderStatisticsApi, pageSellOrderApi, } from '@/api/order.js'
	import { listFrontOrderStateApi } from '@/api/common.js'
	import OrderListItem from './components/OrderListItem.vue'
	import Tooltip from '@/components/tooltip/tooltip.vue'
	import ExportPopup from './components/ExportPopup.vue'
	
	
	const goBack = () => uni.navigateBack()
	
	const navBar = ref(null)
	
	const navBarHeight = computed(() => {
		const statusBarHeight = uni.getWindowInfo().statusBarHeight
		const navigationBarHeight = statusBarHeight + (navBar.value && navBar.value.height || 0)
		return navigationBarHeight
	})
	const safeAreaBottom = computed(() => {
		return uni.getSystemInfoSync().safeAreaInsets && uni.getSystemInfoSync().safeAreaInsets.bottom || 0
	})
	
	const activeId = ref('')
	const dataList = ref([])
	const paging = ref(null)
	const queryParams = ref({
		activeId: '',
		orderState: '', // 订单状态：1-待支付, 2-待核销, 3-核销中, 4-已取消, 5-已完成, 6-已关闭
		pageNum: 1,
		pageSize: 10,
	})
	const queryList = (pageNo, pageSize) => {
		queryParams.value.pageNum = pageNo
		pageSellOrderApi(unref(queryParams)).then(res => {
			paging.value.complete(res.list)
		})
	}
	
	// const tabs = ref([])
	// 订单状态
	const orderStatusTabs = ref([
		{ name: '全部', code: '' }
	])
	const currentOrderStatusTab = ref('')
	const scrollLeft = ref(0)
	const onOrderStatusTabClick = (tab, i) => {
		if (tab.code !== currentOrderStatusTab.value) {
			scrollLeft.value = i * 40
			currentOrderStatusTab.value = tab.code
			queryParams.value.orderState = tab.code
			paging.value.reload()
		}
	}
	
	const getOrderState = () => {
		listFrontOrderStateApi({}).then(res => {
			orderStatusTabs.value = orderStatusTabs.value.concat(res)
		})
	}
	
	const activeOrderStatistics = ref({})
	const getOrderStatistics = () => {
		getOrderStatisticsApi({
			activeId: activeId.value
		}).then(res => {
			activeOrderStatistics.value = res
		})
	}
	
	const showTooltipType = ref(0)
	const clickOutside = () => {
		showTooltipType.value = 0
	}
	
	const showTooltip = (type) => {
		if (type === 1) {
			showTooltipType.value = 1
		} else if (type === 2) {
			showTooltipType.value = 2
		} else if (type === 3) {
			showTooltipType.value = 3
		}
	}
	
	const exportPopupRef = ref(null)
	const showExport = () => {
		exportPopupRef.value && exportPopupRef.value.showDialog(true)
	}
	
	onLoad((query) => {
		activeId.value = +query.id
		queryParams.value.activeId = +query.id
		getOrderStatistics()
		getOrderState()
	})
</script>

<style lang="scss" scoped>
	.order-status-tabs {
		overflow: auto;
		white-space: nowrap;
		
		.tab-item {
			display: inline-flex;
			height: 30px;
			
			&:not(:last-child) {
				margin-right: 36px;
			}
		}
		.active {
			position: relative;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 15%;
				height: 4px;
				width: 70%;
				border-radius: 4px;
				background: $uni-primary;
			}
		}
	}
</style>
